<template>
    <div class="header_box">
        <div class="left">
            <div class="soft_msg">
                <div class="M_img">
                    <img src="../../assets/M_bg/logo.png">
                </div>
                <p>小符音乐</p>
            </div>
            <div class="Lnav">
                <img src="../../assets/M_bg/left_img.png" alt="" >
            </div>
        </div>

        <div class="right">
            <div class="research_box">
                <input type="text" class="research_input" >
                <img class="research_img" src="../../assets/M_bg/search.png">  
            </div>

            <div class="ctrltrol">
                <div class="login_box">
                    <img src="../../assets/M_bg/logo.png" class="l_img">
                    <a href="">未登录</a>
                </div>

                <div class="ctrl_box">
                    <img src="../../assets/M_bg/min.png" id="min">
                    <img src="../../assets/M_bg/b_s.png" id="b_s">
                    <img src="../../assets/M_bg/close.png" id="close">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.header_box{
    background-color: #202023;
    display: flex;
    justify-content: baseline;
}

/* 软件信息 */
.left{ 
    width: 20%; 
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.soft_msg{
    display: flex;
    justify-content: baseline;
}
.M_img{ width: 30px; height: 30px; border-radius: 50%; background-color: white; }
.M_img img{ width: 30px; height: 30px; }

.soft_msg p{ margin-left: 15px; font-weight: bold; line-height:30px; }          /* vertical-align: middle; */
.Lnav{ margin-top: 6px; margin-right: 25px; }
.Lnav img{ width: 10px; height: 20px; }


.right{
    width: 80%;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 99;
}

/* 搜索 */
.research_box{ position: relative; }
.research_input{  position: relative; left:0px; top: 15px; z-index: 1; width: 290px; height: 30px; margin-left:125px; border-radius: 15px; line-height: 26px; font-size: 14px; color:#666; padding-left: 15px; background-color: white; }
.research_img{  position: absolute; right: 15px; top: 18px; z-index: 2; width: 25px; height: 25px;  background-color: white; }

.ctrltrol {
    display: flex;
    justify-content: space-between;
}
/* 登录 */
.login_box{ display: flex; justify-content: baseline; width:140px; padding-top:14px; margin-right: 35px; }
.login_box a{ font-size: 16px; }
.l_img{ width: 30px; height: 30px; border-radius: 50%; background-color: white; }
.login_box a{ padding-left: 15px; font-weight:lighter; text-decoration: none; line-height:30px; } 

/* 控制 */
.ctrl_box{ display: flex; justify-content: baseline; padding-top: 18px; }
.ctrl_box img{ width: 20px; height: 20px; margin-right: 15px; }
</style>